<template>
    <show-modal :title="options.title" :loading="options.loading" width="540px" @cancel="cancel" @submit="submit">
        <a-form ref="formRef" :model="form" :rules="valueRules" v-bind="layout">
            <a-form-item label="字典值名称" name="dict_label">
                <a-input v-model:value="form.dict_label" placeholder="请填写字典值名称" />
            </a-form-item>
            <a-form-item label="字典值" name="dict_value">
                <a-input v-model:value="form.dict_value" placeholder="请填写字典值" />
            </a-form-item>
            <a-form-item label="字典值颜色" name="dict_color">
                <a-input v-model:value="form.dict_color" placeholder="请填写字典值颜色 red or #ff0000" />
            </a-form-item>
        </a-form>
    </show-modal>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { valueRules } from './rules'
import { IDictData } from '../dict.type';
import { add, update } from '@/api/system/dict/index';
import { message } from 'ant-design-vue';

let props = defineProps({
    info: {
        type: Object,
        default: () => null
    },
    dictCode: {
        type: String,
        default: ''
    }
})

let emit = defineEmits(['cancel', 'submit']);
/**基本配置 */
const options = reactive({
    title: '编辑字典值',
    loading: false
})
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};
/**表单 */
let form = reactive<IDictData>({
    dict_code: props.dictCode,
    id: '',
    dict_label: '',
    dict_value: '',
    dict_color: '',
});
props.info && Object.assign(form, props.info)
const formRef = ref();
// 提交
const submit = async () => {
    formRef.value
        .validate()
        .then(async () => {
            try {
                if (form.id) {
                    await update(toRaw(form));
                } else {
                    await add(toRaw(form));
                }
                message.success('操作成功');
                emit('submit');
            } finally {
            }
        })
        .catch((error: any) => {
            console.log('error', error);
        });
}
//取消
const cancel = () => {
    emit('cancel')
}
</script>